<template>
  <div>
    <!--    编辑/添加表单-->
    <!--    编辑/添加表单-->
    <!--    编辑/添加表单-->
    <el-dialog :title="title" :visible.sync="dialogFormVisible" width="40%" resetFields>
      <el-form :model="echoAll" :rules="unitMeasureRules" ref="unitMeasureRulesForm">
        <el-form-item label="orderId" prop="orderId" v-show="false">
          <el-input v-model="echoAll.orderId" autocomplete="on"></el-input>
        </el-form-item>
        <el-form-item label="国家" prop="country">
          <el-input v-model="echoAll.country" autocomplete="on" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="订单号" prop="orderNumber">
          <el-input v-model="echoAll.orderNumber" autocomplete="on" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="商品信息" prop="productInfo">
          <el-input v-model="echoAll.productInfo" autocomplete="on" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="品名/SkU" prop="sku">
          <el-input v-model="echoAll.sku" autocomplete="off" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="买家信息" prop="buyerName">
          <el-input v-model="echoAll.buyerName" autocomplete="off" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="订单总额" prop="totalAmount">
          <el-input v-model="echoAll.totalAmount" autocomplete="off" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="订购时间" prop="orderPlacedAt">
          <el-date-picker
            v-model="echoAll.orderPlacedAt"
            align="right"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="付款时间" prop="paymentTime">
          <el-date-picker
            v-model="echoAll.paymentTime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="发货时限" prop="deliveryDeadline">
          <el-date-picker
            v-model="echoAll.deliveryDeadline"
            align="right"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="发货窗口" prop="shippingWindow">
          <el-input v-model="echoAll.shippingWindow" autocomplete="off" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="目的地" prop="destination">
          <el-input v-model="echoAll.destination" autocomplete="off" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="物流方式" prop="shippingMethod">
          <el-input v-model="echoAll.shippingMethod" autocomplete="off" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="shippingStatus">
          <el-radio-group v-model="echoAll.shippingStatus">
            <el-radio label="1">已送达</el-radio>
            <el-radio label="2">已发货</el-radio>
            <el-radio label="3">未发货</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="orderUpdateMeasure('unitMeasureRulesForm')">确 定</el-button>
      </div>
    </el-dialog>
    <!--    下拉查询-->
    <!--    下拉查询-->
    <!--    下拉查询-->
    <el-form :inline="true" :model="unitMeasure">


      <el-select v-model="unitMeasure.country" size="small" placeholder="请选择国家" :clearable="true"
                 @change="oderFindCountry" style="margin-left: 20px;">


        <el-option
          v-for="item in listData"
          :key="item.value"
          :label="item.country"
          :value="item.country">
        </el-option>

      </el-select>


      <el-select v-model="unitMeasure.shippingStatus" size="small" placeholder="状态" :clearable="true"
                 @change="oderFindCountry" style="margin-left: 20px;margin-right: 20px">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.shippingStatus">
        </el-option>
      </el-select>


      <!--    功能-->
      <!--    功能-->
      <!--    功能-->
      <el-button size="small" type="danger" icon="el-icon-delete" @click="orderDelMore">删除</el-button>
      <el-button size="small" type="primary" icon="el-icon-edit" @click="orderAdd">添加</el-button>

    </el-form>

    <!--    表单-->
    <!--    表单-->
    <!--    表单-->
    <el-table v-loading="loading" :data="orderDelList" @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column label="国家" align="center" prop="country"/>
      <el-table-column label="订单号" align="center" prop="orderNumber"/>
      <el-table-column label="商品信息" align="center" prop="productInfo"/>
      <el-table-column label="品名/SkU" align="center" prop="sku"/>
      <el-table-column label="买家信息" align="center" prop="buyerName"/>
      <el-table-column label="订单总额" align="center" prop="totalAmount"/>
      <el-table-column label="订购时间" align="center" prop="orderPlacedAt"/>
      <el-table-column label="付款时间" align="center" prop="paymentTime"/>
      <el-table-column label="发货时限" align="center" prop="deliveryDeadline"/>
      <el-table-column label="发货窗口" align="center" prop="shippingWindow"/>
      <el-table-column label="目的地" align="center" prop="destination"/>
      <el-table-column label="物流方式" align="center" prop="shippingMethod"/>
      <el-table-column label="状态" align="center" prop="shippingStatus">
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.shippingStatus == '1' ? 'success' : scope.row.shippingStatus == '2' ?'primary':'warning'"
            disable-transitions>
            {{ scope.row.shippingStatus == '1' ? '已送达' : scope.row.shippingStatus == '2' ? '已发货' : '未发货' }}
          </el-tag>
        </template>
      </el-table-column>


      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
          >编辑
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
          >删除
          </el-button>

        </template>
      </el-table-column>
    </el-table>
    <span class="demonstration"/>
    <el-pagination
      style="margin-right: 14px; margin-top: 10px"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 7, 10,15,20]"
      :page-size="100"
      layout=" ->, total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
import {getList, orderAddFind, orderDelById, orderUpMeasure,orderDelMore } from "@/api/orderDel";


export default {
  name: "Listing",
  data() {
    return {
      // 删除
      ids:[],
      // 是否显示更新&添加表单
      dialogFormVisible: false,
      // 显示更新||添加
      title: '',
      // 更新&添加表单规则
      unitMeasureRules: {
        brandName: [
          {required: true, message: '请输入品名/SKU', trigger: 'blur'}
        ],
        shop: [
          {required: true, message: '请输入店铺名称', trigger: 'blur'}
        ],
        country: [
          {required: true, message: '请输入国家名称', trigger: 'blur'}
        ],
        primaryFlag: [
          {required: true, message: '请确认FBA可售', trigger: 'blur'}
        ],
      },
      // 更新表单回显数据
      echoAll: {
        orderId: null,
        country: null,
        orderNumber: null,
        productInfo: null,
        sku: null,
        buyerName: null,
        totalAmount: null,
        orderPlacedAt: null,
        paymentTime: null,
        deliveryDeadline: null,
        shippingWindow: null,
        destination: null,
        shippingMethod: null,
        shippingStatus: null,
      },
      // 下拉查询
      // 下拉查询
      // 下拉查询
      unitMeasure: {
        orderNumber: null,
        country: null,
        shippingStatus: null
      },
      listData: [],
      options: [{
        shippingStatus: '1',
        label: '已送达'
      }, {
        shippingStatus: '2',
        label: '已发货'
      }, {
        shippingStatus: '3',
        label: '未发货'
      }],
      // 更新&添加表单日期快捷选择
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '明天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() + 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '后天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() + 3600 * 1000 * 24 * 2);
            picker.$emit('pick', date);
          }
        }],
      },
      // 查全部集合
      orderDelList: [],

      // 加载遮罩层
      loading: true,
      // 分页
      pageNum: 1,
      currentPage: 1,
      total: 0,
      pageSize: 5,


    }
  },
  methods: {
    fetchData() {
      let params = {
        pageNum: this.pageNum,// 分页
        pageSize: this.pageSize,// 每页数据数量

        // orderNumber:this.unitMeasure.orderNumber
      }
      getList(params).then(res => {

        let pageInfo = res.data
        this.loading = false
        this.orderDelList = pageInfo.list
        this.total = pageInfo.total
        this.listData = pageInfo.list

      })
    },
    // 分页
    // 分页
    // 分页
    handleSizeChange(val) {
      this.pageSize = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.pageNum = val
      this.fetchData()
    },
    // 多选框ID
    // 多选框ID
    // 多选框ID
    handleSelectionChange(selection) {
      this.ids=[]
      for (let i = 0; i < selection.length; i++) {
        this.ids.push(selection[i].orderId)
      }
      console.log("1212",this.ids)
    },
    // 编辑
    // 编辑
    // 编辑
    handleUpdate(row) {
      this.echoAll = row
      this.dialogFormVisible = true
      this.title = '编辑'
    },
    // 添加
    // 添加
    // 添加
    orderAdd() {
      this.echoAll = {}
      this.dialogFormVisible = true
      this.title = '添加'
    },
    // 批量删除
    // 批量删除
    // 批量删除
    orderDelMore() {
      this.$confirm('此操作将永久删除 ' + this.ids + ' 单位, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params = {
          ids: this.ids.join(',')
        }

        orderDelMore(params).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.fetchData()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 下拉框查询
    // 下拉框查询
    // 下拉框查询
    oderFindCountry() {
      let params = {
        pageNum: this.pageNum,// 分页
        pageSize: this.pageSize,// 每页数据数量
        orderNumber: this.unitMeasure.orderNumber,
        country: this.unitMeasure.country,
        shippingStatus: this.unitMeasure.shippingStatus
      }
      getList(params).then(res => {
        console.log('11', params.country, params.shippingStatus)
        let pageInfo = res.data
        this.loading = false
        this.orderDelList = pageInfo.list

      })

    },
    // 更新&添加表单确认
    // 更新&添加表单确认
    // 更新&添加表单确认
    orderUpdateMeasure(forName) {
      this.$refs[forName].validate((valid) => {
        if (valid) {
          if (this.title === "编辑") {

            orderUpMeasure(this.echoAll).then(res => {
              alert('编辑成功!')
              this.fetchData()
            })
          } else if (this.title === "添加") {
            orderAddFind(this.echoAll).then(res => {
              alert('添加成功!')
              this.fetchData()
            })
          }
        } else {
          return false
        }
        this.dialogFormVisible = false
      })
    },
    handleDelete(row) {
      this.$confirm('此操作将永久删除 ' + row.orderNumber + ' , 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params = {
          id: row.orderId
        }
        orderDelById(params).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.fetchData()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },

  },
  created() {
    this.fetchData()
  }
}
</script>

<style scoped lang="scss">

</style>
